<template>
  <transition>
    <div class="message"
         v-if="show">
      <div class="message_wrap">
        <div class="message_icon"
             :class="bgCls"
             v-if="iconImg">
          <img :src="iconImg"
               alt="">
        </div>
        <div class="message_title"
             v-if="title">{{title}}</div>
        <div class="message_content rich_content editor-content"
             v-if="content"
             v-html="_pxToRem(content)"></div>
        <div class="message_btn">
          <button class="btn btn_default"
                  v-if="type === 'confirm'"
                  @click="handleCancel">{{btnCancel}}</button>
          <button class="btn btn_main"
                  @click="handleConfirm">{{btnConfirm}}</button>
        </div>
      </div>
    </div>

  </transition>
</template>

<script>

export default {
  name: 'message',
  props: {
    type: String,
    icon: [String, Object],
    title: String,
    content: String,
    btnCancel: {
      type: String,
      default: '取消'
    },
    btnConfirm: {
      type: String,
      default: '确定'
    },
    onCancel: Function,
    onConfirm: Function
  },
  data () {
    return {
      show: false
    }
  },
  computed: {
    bgCls () {
      switch (this.icon) {
        case 'success':
          return 'success'
        case 'warning':
          return 'warning'
        default:
          return ''
      }
    },
    iconImg () {
      switch (this.icon) {
        case 'success':
          return require('./img/icon_success.png')
        case 'warning':
          return require('./img/icon_warning.png')
        default:
          return this.icon
      }
    }
  },
  methods: {
    handleCancel () {
      if (this.onCancel && typeof this.onCancel === 'function') {
        this.onCancel()
      }
      this.show = false
    },
    handleConfirm () {
      if (this.onConfirm && typeof this.onConfirm === 'function') {
        this.onConfirm()
      }
      this.show = false
    }
  },
  created () {
    this.show = true
  }
}
</script>

<style lang="stylus" scoped>
.v-leave-to
  opacity 0
.v-enter-active,
.v-leave-active
  transition all 0.2s
.message
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 3000
  background-color rgba(0, 0, 0, 0.7)
  .message_wrap
    position absolute
    top 50%
    left 50%
    padding 30px 15px 40px
    width 300px
    border-radius 10px
    background-color #fff
    text-align center
    transform translate(-50%, -50%)
  .message_icon
    flexAlign(center, center)
    margin 0 auto
    margin-bottom 20px
    width 80px
    border-radius 50%
    img
      width 100%
    &.success
      height 80px
      background-color rgba(232, 247, 255, 1)
      img
        width 40px
    &.warning
      height 80px
      background-color rgba(255, 242, 242, 1)
      img
        width 10px
  .message_title
    margin-bottom 10px
    color rgba(33, 40, 44, 1)
    font-size 18px
    line-height 1.5
  .message_content
    color rgba(33, 40, 44, 0.6)
    font-size 14px
    line-height 1.5
  .message_btn
    margin-top 30px
    .btn
      width 180px
    .btn+.btn
      margin-top 20px
button
  outline none
  border none
  background-color transparent
  font-size $font-size
  font-family BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif
.btn
  width 100%
  height 45px
  outline none
  border none
  border-radius 6px
  background-color #fff
  color #ffffff
  font-size 16px
  &.btn_default
    position relative
    border 1PX solid rgba(35, 24, 21, 0.5)
    color rgba(35, 24, 21, 0.7)
  &.btn_warning
    position relative
    background rgba(255, 129, 129, 1)
    color #fff
  &.btn_main
    background rgba(0, 170, 255, 1)
</style>
